<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="order-box com-box">
			<!-- 地址 -->
			<navigator url="/pages/address/list?source=1" class="address-section">
				<view class="order-content">
					<text class="icon icon-region"></text>
					<view class="cen">
						<view class="top">
							<text class="name">{{addressData.name}}</text>
							<text class="mobile">{{addressData.phone}}</text>
						</view>
						<text class="address">{{addressData.provinceName}} {{addressData.cityName}} {{addressData.areaName}}
							{{addressData.address}}
						</text>
					</view>
					<text class="icon icon-arrow_right"></text>
				</view>

				<image class="a-bg" src="/static/arc.png"></image>
			</navigator>

			<view class="goods-section">
				<!-- 商品列表 -->
				<view v-for="(item, index) in orderReqeust.goodsList" :key="index" class="g-item">
					<image :src="item.goodsPic"></image>
					<view class="right">
						<text class="title clamp">{{item.goodsName}}</text>
						<text class="price">￥{{item.price}}</text>
						<text class="spec">x {{item.specification}}</text>
						<view class="price-box">
							<text class="price">定金：￥{{item.price * item.depositRatio / 100}}</text>
							<text class="number">x {{item.buyCount}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 金额明细 -->
			<view class="row-list">
				<view class="row">
					<text class="tit clamp">定金</text>
					<text class="tip">¥{{orderReqeust.deposit}}</text>
				</view>
				<view class="row">
					<text class="tit clamp">备注</text>
					<input class="tip" type="text" v-model="orderReqeust.mono" placeholder="请填写备注信息" />
				</view>
			</view>

			<!-- 底部 -->
			<view class="footer">
				<view class="price-content">
					<text>实付款</text>
					<text class="price-tip">￥</text>
					<text class="price">{{orderReqeust.deposit}}</text>
				</view>
				<text class="submit" @click="submit">提交订单</text>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	export default {
		components: {
			uniHeader,
			uniFooter
		},
		data() {
			return {
				orderReqeust: {
					goodsList: [],
					mono: '',
					takeWay: '',
					deposit: 0,
					addressId: ''
				},
				isAuth: false,
				addressData: {},
				submiting: false,
				takeway: ['货车配送'],
				payway: ['现款交易', '货到付款', '款到付货'],
				takewayindex: 0,
				paywayindex: 0
			}
		},
		onShow() {
			this.isAuth = this.$api.isAuth()
		},
		onLoad(option) {
			//商品数据
			if (option.takeway) {
				this.orderReqeust.takeWay = option.takeway
			}
			this.orderReqeust.goodsList = this.$api.globalData.goodsList
			console.log(this.orderReqeust.goodsList)
			let deposit = 0
			this.orderReqeust.goodsList.forEach(item => {
				deposit += item.price * item.buyCount
			})
			this.orderReqeust.deposit = deposit
			this.$api.request('/zraddress/defaultAddress', {}, {
				method: 'GET',
				content: 'application/x-www-form-urlencoded'
			}).then(res => {
				this.addressData = res.data.address
				this.calcFreightPrice()
			})
		},
		methods: {
			TakeWayChange(e) {
				this.takewayindex = e.target.value
			},
			PayWayChange(e) {
				this.paywayindex = e.target.value
			},
			calcFreightPrice() {
				if (this.addressData) {
					this.orderReqeust.addressId = this.addressData.id
				}
				this.orderReqeust.deposit = 0
				this.orderReqeust.goodsList.forEach(item => {
					this.orderReqeust.deposit += item.price * item.depositRatio * item.buyCount / 100
				})
			},
			submit() {
				if (this.submiting) {
					return
				}
				this.submiting = true
				if (this.addressData.id) {
					this.orderReqeust.addressId = this.addressData.id
				}
				if (this.orderReqeust.takeWay == 'buy') {
					this.$api.request('/goodOrder/addOrder', {
						goodsId: this.orderReqeust.goodsList[0].id,
						buyCount: this.orderReqeust.goodsList[0].buyCount,
						remark: this.orderReqeust.mono,
						addressId: this.orderReqeust.addressId
					}, {
						content: 'application/x-www-form-urlencoded',
						failback: failres => {
							this.submiting = false
							this.$api.msg(failres.message)
						}
					}).then(res => {
						//提交订单成功后，无需再让用户提交订单
						// this.submiting = false
						uni.redirectTo({
							url: '/pages/pay/pay?allOrder=' + res.data.allOrder + '&price=' + res.data.allMoney
						})
					})
				} else {
					this.$api.request('/goodOrder/carOrder', {
						shopCar: this.orderReqeust.goodsList,
						remark: this.orderReqeust.mono,
						addressId: this.orderReqeust.addressId,
						money: this.orderReqeust.deposit,
					}, {
						failback: failres => {
							this.submiting = false
							this.$api.msg(failres.message)
						}
					}).then(res => {
						//提交订单成功后，无需再让用户提交订单
						// this.submiting = false
						uni.redirectTo({
							url: '/pages/pay/pay?allOrder=' + res.data.allOrder + '&price=' + res.data.allMoney
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100upx;
	}

	.row {
		justify-content: space-between;

		.tit {
			width: 240upx;
		}

		.uni-input {
			display: flex;
		}

		input {
			font-size: $base-font-base;
			color: $base-color-dark;
			text-align: right;
		}
	}

	/* 支付列表 */
	.pay-list {
		padding-left: 40upx;
		margin-top: 16upx;
		background: #fff;

		.pay-item {
			display: flex;
			align-items: center;
			padding-right: 20upx;
			line-height: 1;
			height: 110upx;
			position: relative;
		}

		.icon-weixinzhifu {
			width: 80upx;
			font-size: 40upx;
			color: #6BCC03;
		}

		.icon-alipay {
			width: 80upx;
			font-size: 40upx;
			color: #06B4FD;
		}

		.icon-xuanzhong2 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 40upx;
			color: $base-color-page;
		}

		.tit {
			font-size: 32upx;
			color: $base-color-dark;
			flex: 1;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: space-between;
		font-size: $base-font-base;
		background-color: #fff;
		z-index: 998;
		color: $base-color-base;
		box-shadow: 0 -1px 5upx rgba(0, 0, 0, .1);

		.price-content {
			padding-left: 30upx;
		}

		.price-tip {
			color: $base-color-page;
			margin-left: 8upx;
		}

		.price {
			font-size: $base-font-lg;
			color: $base-color-page;
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: $base-font-lg;
			background-color: $base-color-page;
		}
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		page {
			padding-bottom: 0;
		}

		.row {
			.tit {
				width: 120px;
			}

			input {
				font-size: 16px;
			}
		}

		.order-box {
			margin: 20px auto;
		}

		/* 支付列表 */
		.pay-list {
			padding-left: 20px;
			margin-top: 15px;

			.pay-item {
				padding-right: 20px;
				line-height: 1;
				height: 50px;
				position: relative;
			}

			.icon-weixinzhifu {
				width: 40px;
				font-size: 24px;
			}

			.icon-alipay {
				width: 40px;
				font-size: 24px;
			}

			.icon-xuanzhong2 {
				width: 40px;
				font-size: 24px;
				height: 40px;
			}

			.tit {
				font-size: 24px;
			}
		}

		.footer {
			position: relative;
			left: 0;
			bottom: 0;
			height: 50px;
			line-height: 50px;
			justify-content: space-between;
			font-size: 16px;
			box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);

			.price-content {
				padding-left: 15px;
			}

			.price-tip {
				color: $base-color-pc;
				margin-left: 8px;
			}

			.price {
				font-size: 24px;
				color: $base-color-pc;
			}

			.submit {
				width: 140px;
				font-size: 16px;
				cursor: pointer;
				background-color: $base-color-pc;
			}
		}
	}

	/* #endif */
</style>
